<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label nzFor="oldPassword" nzRequired [nzSm]="6" [nzXs]="24">原密码</nz-form-label>
    <nz-form-control [nzErrorTip]="combineTpl" [nzSm]="14" [nzXs]="24">
      <input id="oldPassword" formControlName="oldPassword" nz-input placeholder="原密码" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzFor="newPassword" nzRequired [nzSm]="6" [nzXs]="24">新密码</nz-form-label>
    <nz-form-control [nzErrorTip]="combineTpl" [nzSm]="14" [nzXs]="24">
      <nz-input-group [nzSuffix]="suffixTemplate1">
        <input id="newPassword" formControlName="newPassword" nz-input placeholder="新密码"
          [type]="passwordVisible ? 'text' : 'password'" (ngModelChange)="updateConfirmValidator()" />
      </nz-input-group>
      <password-strength-meter [password]="sureNewPassword"></password-strength-meter>
      <ng-template #suffixTemplate1>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
          (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzFor="sureNewPassword" nzRequired [nzSm]="6" [nzXs]="24">确认新密码</nz-form-label>
    <nz-form-control [nzErrorTip]="combineTpl" [nzSm]="14" [nzXs]="24">
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input id="sureNewPassword" formControlName="sureNewPassword" nz-input placeholder="确认新密码"
          [type]="compirePasswordVisible ? 'text' : 'password'" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon [nzType]="compirePasswordVisible ? 'eye-invisible' : 'eye'"
          (click)="compirePasswordVisible = !compirePasswordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
</form>
<ng-template #combineTpl let-control>
  @if (control.hasError('message')) {
  {{ control.errors.message }}
  }
  @if (control.hasError('required')) {
  必填项
  }
</ng-template>